<!--
 * Copyright © 2022
 * @Author: zhangxiang
 * @Date: 2022-08-03 17:02:33
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-09-25 15:34:50
 * @Description:
 *
-->
<template>
  <el-dialog
    class="create-dialog"
    :title="cloudSelect == '' ? '请选择云服务商' : '创建云主机'"
    :visible="show"
    width="52vw"
    top="10vh"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="closeClick"
  >
    <!-- 选择云商 -->
    <CloudSelector :type="'all'" :cloud-select.sync="cloudSelect" />
    <!-- 创建虚机 -->
    <template v-if="cloudSelect">
      <el-steps
        :active="active"
        align-center
        process-status="process"
        finish-status="success"
      >
        <el-step title="基本配置" />
        <el-step title="网络配置" />
        <el-step title="高级配置" />
        <el-step title="确认配置" />
      </el-steps>
      <div class="divider"></div>
      <template v-if="cloudSelect === '阿里云'">
        <CreateBasicAliyun
          v-show="active === 0"
          ref="createBasic"
          :cloud-select="cloudSelect"
        />
        <CreateNetwork
          v-show="active === 1"
          ref="createNetwork"
          key="createNetworkAliyun"
          :basic="basic"
        />
        <CreateHigh
          v-show="active === 2"
          key="createHighAliyun"
          ref="createHigh"
          :basic="basic"
        />
        <CreateConfirm
          v-if="active === 3"
          ref="createConfirm"
          key="createConfirmAliyun"
          :basic="basic"
          :network="network"
          :high="high"
        />
      </template>
      <template v-if="cloudSelect === '华为云'">
        <CreateBasicHuawei
          v-show="active === 0"
          ref="createBasic"
          :cloud-select="cloudSelect"
        />
        <CreateNetwork
          v-show="active === 1"
          ref="createNetwork"
          key="createNetworkHuawei"
          :basic="basic"
        />
        <CreateHigh
          v-show="active === 2"
          ref="createHigh"
          key="createHighHuawei"
          :basic="basic"
        />
        <CreateConfirm
          v-if="active === 3"
          ref="createConfirm"
          key="createConfirmHuawei"
          :basic="basic"
          :network="network"
          :high="high"
        />
      </template>
      <template v-if="cloudSelect === '腾讯云'">
        <CreateBasicTencent
          v-show="active === 0"
          ref="createBasic"
          :cloud-select="cloudSelect"
        />
        <CreateNetwork
          v-show="active === 1"
          ref="createNetwork"
          key="createNetworkTencent"
          :basic="basic"
        />
        <CreateHigh
          v-show="active === 2"
          ref="createHigh"
          key="createHighTencent"
          :basic="basic"
        />
        <CreateConfirm
          v-if="active === 3"
          ref="createConfirm"
          key="createConfirmTencent"
          :basic="basic"
          :network="network"
          :high="high"
        />
      </template>
      <template v-if="cloudSelect === 'Openstack'">
        <CreateBasicOpenstack
          v-show="active === 0"
          ref="createBasic"
          :cloud-select="cloudSelect"
        />
        <CreateNetwork
          v-show="active === 1"
          ref="createNetwork"
          key="createNetworkOpenstack"
          :basic="basic"
        />
        <CreateHigh
          v-show="active === 2"
          ref="createHigh"
          key="createHighOpenstack"
          :basic="basic"
        />
        <CreateConfirm
          v-if="active === 3"
          ref="createConfirm"
          key="createConfirmOpenstack"
          :basic="basic"
          :network="network"
          :high="high"
        />
      </template>
      <template v-if="cloudSelect === '浪潮InCloud'">
        <CreateBasicInspur
          v-show="active === 0"
          ref="createBasic"
          :cloud-select="cloudSelect"
        />
        <CreateNetwork
          v-show="active === 1"
          ref="createNetwork"
          key="createNetworkOpenstack"
          :basic="basic"
        />
        <CreateHigh
          v-show="active === 2"
          ref="createHigh"
          key="createHighOpenstack"
          :basic="basic"
        />
        <CreateConfirm
          v-if="active === 3"
          ref="createConfirm"
          key="createConfirmOpenstack"
          :basic="basic"
          :network="network"
          :high="high"
        />
      </template>
    </template>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="cancelClick">取 消</el-button>
      <template v-if="cloudSelect">
        <el-button
          v-if="active > 0"
          size="small"
          :disabled="confirmLoading"
          @click="previousClick"
        >上一步</el-button>
        <el-button
          v-if="active === 3"
          type="primary"
          size="small"
          :loading="confirmLoading"
          @click="confirmClick"
        >确定</el-button>
        <el-button
          v-else
          type="primary"
          size="small"
          @click="nextClick"
        >下一步</el-button>
      </template>
      <el-button
        v-else
        type="primary"
        size="small"
        @click="confirmClick"
      >确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { createVM } from '@/api/cn-resource'
import CreateBasicAliyun from './CreateBasicAliyun.vue'
import CreateBasicHuawei from './CreateBasicHuawei.vue'
import CreateBasicTencent from './CreateBasicTencent.vue'
import CreateBasicOpenstack from './CreateBasicOpenstack.vue'
import CreateBasicInspur from './CreateBasicInspur.vue'
import CreateNetwork from './CreateNetwork.vue'
import CreateHigh from './CreateHigh.vue'
import CreateConfirm from './CreateConfirm.vue'
import CloudSelector from '@/components/CloudSelector'

export default {
  name: 'CreateDialog',
  components: {
    CloudSelector,
    CreateBasicAliyun,
    CreateBasicHuawei,
    CreateBasicTencent,
    CreateBasicOpenstack,
    CreateBasicInspur,
    CreateNetwork,
    CreateHigh,
    CreateConfirm
  },
  props: {
    // 是否显示
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      cloudSelect: '',
      confirmLoading: false,
      active: 0,
      basic: {},
      network: {},
      high: {}
    }
  },
  computed: {},
  watch: {
    /**
     * @description: 云商选择切换
     * @return {*}
     */
    cloudSelect: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.confirmLoading = false
          this.active = 0
          this.basic = {}
          this.network = {}
          this.high = {}
        }
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {},
  methods: {
    /**
     * @description: 确定
     * @return {*}
     */
    confirmClick() {
      if (!this.cloudSelect) {
        this.$message.info({
          message: '请先选择云服务商',
          duration: '2000'
        })
        return
      }
      this.confirmLoading = true
      createVM({
        ...this.basic,
        ...this.network,
        ...this.high
      })
        .then((res) => {
          this.$emit('success')
          this.closeClick()
        })
        .finally(() => {
          this.confirmLoading = false
        })
    },
    /**
     * @description: 下一步
     * @return {*}
     */
    nextClick() {
      if (this.active === 0) {
        this.$refs.createBasic.validateForm((value) => {
          this.basic = value
          this.active++
        })
      } else if (this.active === 1) {
        this.$refs.createNetwork.validateForm((value) => {
          this.network = value
          this.active++
        })
      } else if (this.active === 2) {
        this.$refs.createHigh.validateForm((value) => {
          this.high = value
          this.active++
        })
      }
    },
    /**
     * @description: 上一步
     * @return {*}
     */
    previousClick() {
      this.active--
    },
    /**
     * @description: 关闭
     * @return {*}
     */
    closeClick() {
      this.$emit('update:show', false)
    },
    /**
     * @description: 取消
     * @return {*}
     */
    cancelClick() {
      this.closeClick()
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.create-dialog {
  /deep/ .el-dialog {
    min-width: 850px;
  }
  .divider {
    height: 1px;
    background: #f2f2f2;
    margin: 10px 0 20px;
  }
  .confirm-ctn {
    .title {
      height: 32px;
      background: #f7f7f7;
      .textStyle(14px , 600, #262626);
      line-height: 32px;
      padding-left: 20px;
      margin-bottom: 10px;
      margin-top: 15px;
    }
    .content {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-left: 20px;
      .item {
        width: 33.3%;
        height: 30px;
        display: flex;
        align-items: center;
        .subtitle {
          min-width: 56px;
          .textStyle(14px , 400, #C3C3C3);
          line-height: 20px;
          text-align: right;
          margin-right: 10px;
        }
        .subcontent {
          .textStyle(14px , 500, #4a4a4a);
          line-height: 20px;
        }
      }
    }
  }
}
</style>
